<template>
  <div>
    <div class="nav">
    </div>
    <div>
      <el-table ref="multipleTable"
                :data="list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"> </el-table-column>
        <el-table-column prop="userId"
                         label="id"
                         width="60"> </el-table-column>
        <el-table-column prop="userUid"
                         label="Uid"
                         width="120"> </el-table-column>
        <el-table-column prop="userSchool"
                         label="学校"> </el-table-column>
        <el-table-column prop="userGrade"
                         label="年级"
                         width="100"> </el-table-column>
        <el-table-column prop="userRealname"
                         label="真实姓名"
                         width="100"> </el-table-column>
        <el-table-column prop="userNickname"
                         label="昵称"
                         width="100"> </el-table-column>
        <el-table-column prop="userTel"
                         label="绑定手机"
                         width="120"> </el-table-column>
        <el-table-column prop="userPassword"
                         label="用户密码"
                         width="120"> </el-table-column>
        <el-table-column prop=userSex
                         :formatter="sexFormat"
                         label="性别"
                         width="60">
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template #default="scope">
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <el-table-column label="日期"
                     width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column> -->

    <!-- 编辑弹出框 -->
    <div>
      <van-popup v-model:show="showModi"
                 style="padding:30px;borderRadius:20px;;minWidth:300px;">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field v-model="formData.userUid"
                       name="UID"
                       label="UID"
                       disabled />
            <van-field v-model="formData.userSchool"
                       name="学校"
                       label="学校"
                       placeholder="请输入学校名"
                       :rules="[{ required: true, message: '请输入学校名' }]" />
            <van-field v-model="formData.userGrade"
                       name="年级"
                       label="年级"
                       placeholder="请输入年级"
                       :rules="[{ required: true, message: '请输入年级' }]" />
            <van-field v-model="formData.userRealname"
                       name="真实姓名"
                       label="真实姓名"
                       placeholder="请输入真实姓名"
                       :rules="[{ required: true, message: '请输入真实姓名' }]" />
            <van-field v-model="formData.userNickname"
                       name="昵称"
                       label="昵称"
                       placeholder="请输入昵称" />
            <van-field v-model="formData.userTel"
                       name="绑定手机"
                       label="绑定手机"
                       placeholder="请输入绑定手机"
                       :rules="[{ required: true, message: '请输入绑定手机' }]" />
            <van-field v-model="formData.userPassword"
                       name="密码"
                       label="密码"
                       placeholder="请输入密码"
                       :rules="[{ required: true, message: '请输入密码！' }]" />
            <div style="margin-left:15px;">
              <el-radio v-model="formData.userSex"
                        :label=0>男</el-radio>
              <el-radio v-model="formData.userSex"
                        :label=1>女</el-radio>
            </div>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round
                        block
                        type="primary"
                        native-type="submit">
              确认修改
            </van-button>
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { Toast } from 'vant'
export default {
  setup () {
    const data = reactive({

    })
    const showModi = ref(false)
    const showModiPopup = () => {
      showModi.value = true
    }
    const showDel = ref(false)
    const showDelPopup = () => {
      showModi.value = true
    }
    function sexFormat (row, column) { // 男0女1
      return JSON.parse(JSON.stringify(row)).userSex === 0 ? '男' : '女'
    }
    return {
      data, showModi, showModiPopup, sexFormat, showDel, showDelPopup
    }
  },
  created () {
    this.getList()
  },
  data () {
    return {
      list: [],
      multipleSelection: [],
      formData: {
        userSchool: '',
        userGrade: '',
        userRealname: '',
        userNickname: '',
        userTel: '',
        userPassword: '',
        userSex: 0
      },
      manID: 0
    }
  },
  methods: {
    async getList () {
      const that = this
      this.$axios.user.getAllMan({ pageNo: 1, pageSize: 1000 }).then(res => {
        if (res.status === 200) {
          // console.log(res)
          that.list = res.data.data.records
        }
        console.log(res)
      })
    },
    handleEdit (index, row) { // 右侧编辑
      // 获取proxy中的内容
      const obj = JSON.parse(JSON.stringify(row))
      // console.log(obj)
      this.formData = obj
      this.showModiPopup()
    },
    handleDelete (index, row) { // 右侧删除
      const obj = JSON.parse(JSON.stringify(row))
      // 先获取删除者（管理员）的id
      const ManID = 1// d!!!!!!!!!!!!!!!!!!!!
      // 生成接口需要的形式
      const params = {
        userId: obj.userId,
        ManID: ManID
      }
      this.$axios.user.deleteUser(params).then(res => {
        if (res.status === 200) {
          // console.log(res)
          Toast('删除成功！')
          this.getList()
        } else {
          Toast('出错了')
        }
      })
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onSubmit (values) {
      this.$axios.user.modifyUserInfo(values).then(res => {
        console.log(res)
        if (res.status === 200) {
          Toast('修改成功！')
          this.showModi = false
        } else {
          Toast('出错了')
        }
      })
    },
    handleDelBatch () {
      const arr = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].userId)
      }
      this.$axios.user.deleteUserBatch(arr).then(res => {
        if (res.status === 200) {
          Toast('批量删除成功！')
          this.getList()
        } else {
          Toast('出错了')
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.nav {
  margin-top: $margin-mini;
  margin-left: $margin-mini;
}
</style>
